<template>
  <transition>
    <div v-show="value" flex="main:center cross:center" @click="close" class="component-tip">
      <div flex="dir:top main:center cross:center" @click.stop class="tip-content">
      	<div class="top">
      		 <img class="title" v-if="type==1" src="../assets/images/my-invite/code.png" />
           <img class="zfb-title "  v-else src="../assets/images/zfb.png" height="42" width="246" />

      	   <input type="text" v-if="type==1" class="ncode"  maxlength="8" v-model="val">
           <input type="text" class="zfb-input zfb"  v-model="val" v-else >
      	</div>

        <div class="code" v-if="type==1">
        	输入好友邀请码，您和好友同时会获取一个福袋，福袋里装有福卡和现金红包~
        </div>
        <div class="code" v-else>
          输入您的支付宝账号，红包会放到您输入的支付宝账号中！注意不要输入错误哦~
        </div>
        <div flex="main:center  cross:center" class="btns invite-btn">
          <img v-if="showCancel" @click="close" src="../assets/images/my-invite/cancel.png" />
          <img src="../assets/images/my-invite/sure.png"  @click="$emit('on-confirm',val)"/>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    value: {
      default: false,
      require: true,
      type: Boolean
    },
    type:{
      require:false,
      type:Number
    },
    showCancel: {
      default: true,
      type: Boolean
    },
    maskClickHidden: {
      default: true,
      type: Boolean
    }
  },
  methods:{
    close(){
      if (!this.maskClickHidden) {
        return;
      }
      this.val = null;
      this.$emit("input",false);
    }
  },
  data(){
    return{
       val:null
    }
  }
}
</script>

<style lang="scss">
@import "../assets/css/funcs.scss";
.component-tip {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5000;
  background: rgba(0,0,0,0.5);
  .tip-content {
    padding: pxToRem(40px);
    box-sizing: border-box;
    background: $red;
    overflow: hidden;
    width: 90%;
    border-radius: pxToRem(10px);
  }
  .code{
  	font-size:pxToRem(30px);
  	width: 98%;
  	line-height: pxToRem(40px);
  	margin: auto;
  	color: #fff;
  	margin-top: pxToRem(60px);
  }
  .top{
  	width: 100%;
    padding-top: 3%;
  	input {
  		width: 38%;
	    text-indent: 1em;
	    height: pxToRem(30px);
	    border: none;
	    border-radius: pxToRem(10px);
	    outline: none;
	    font-size: pxToRem(38px);
	    padding-top: 4%;
	    padding-bottom: 4%;
	    color: #999;
	  }
  }
  .ncode{
  	float: left;
  	margin-left: 1%;
  }
  .zfb{
  	float: left;
  	margin-left: 3%;
  	margin-top: pxToRem(6px);
  }
  .zfb-title{
    float: left;
    width: 38%;
    margin-top: 2.6%;
    height: 25px;
  }
  .title{
    float: left;
    width: 54%;
    margin-top: 2.6%;
  }
  .btns {
    width: 90%;
    margin-top: pxToRem(56px);
    img {
      width: pxToRem(230px);
      &:nth-child(2) {
        margin-left: pxToRem(50px);
      }
    }
  }
  .zfb-input{
    width: 50%!important;
  }
}
</style>
